<template>
  <a-skeleton active :loading="loading" :paragraph="{rows: 17}">
    <a-card :bordered="false" class="card-area">
      <a-alert type="info" :showIcon="true">
        <div slot="message">
          共追踪到 {{ dataSource.length }} 条近期HTTP请求记录
          <a-divider type="vertical" />
          <a @click="handleClickUpdate">立即刷新</a>
        </div>
      </a-alert>

      <!-- 表格区域 -->
      <a-table
        :columns="columns"
        :dataSource="dataSource"
        :pagination="pagination"
        :loading="tableLoading"
        :scroll="{ x: 900 }"
        style="margin-top: 20px;"
        @change="handleTableChange"
      >
        <template slot="timeTaken" slot-scope="text">
          <a-tag v-if="text < 500" color="green">{{ text }} ms</a-tag>
          <a-tag v-else-if="text < 1000" color="cyan">{{ text }} ms</a-tag>
          <a-tag v-else-if="text < 1500" color="orange">{{ text }} ms</a-tag>
          <a-tag v-else color="red">{{ text }} ms</a-tag>
        </template>

        <template slot="responseStatus" slot-scope="text">
          <a-tag v-if="text < 200" color="pink">{{ text }}</a-tag>
          <a-tag v-else-if="text < 201" color="green">{{ text }}</a-tag>
          <a-tag v-else-if="text < 399" color="cyan">{{ text }}</a-tag>
          <a-tag v-else-if="text < 403" color="orange">{{ text }}</a-tag>
          <a-tag v-else-if="text < 501" color="red">{{ text }}</a-tag>
          <span v-else>{{ text }}</span>
        </template>

        <template slot="requestMethod" slot-scope="text">
          <a-tag v-if="text === 'GET'" color="#87d068">{{ text }}</a-tag>
          <a-tag v-else-if="text === 'POST'" color="#2db7f5">{{ text }}</a-tag>
          <a-tag v-else-if="text === 'PUT'" color="#ffba5a">{{ text }}</a-tag>
          <a-tag v-else-if="text === 'DELETE'" color="#f50">{{ text }}</a-tag>
          <span v-else>{{ text }} ms</span>
        </template>
      </a-table>
    </a-card>
  </a-skeleton>
</template>

<script>
//import moment from 'moment'
import { getAction } from "@/api/manage";

moment.locale("zh-cn");

export default {
  data() {
    return {
      advanced: false,
      dataSource: [],
      pagination: {
        defaultPageSize: 10,
        defaultCurrent: 1,
        pageSizeOptions: ["10", "20", "30", "40", "100"],
        showQuickJumper: true,
        showSizeChanger: true,
        showTotal: (total, range) =>
          `显示 ${range[0]} ~ ${range[1]} 条记录，共 ${total} 条记录`
      },
      loading: true,
      tableLoading: true
    };
  },
  computed: {
    columns() {
      return [
        {
          title: "请求时间",
          dataIndex: "timestamp",
          customRender(text) {
            return moment(text).format("YYYY-MM-DD HH:mm:ss");
          }
        },
        {
          title: "请求方法",
          dataIndex: "request.method",
          scopedSlots: { customRender: "requestMethod" },
          filters: [
            { text: "GET", value: "GET" },
            { text: "POST", value: "POST" },
            { text: "PUT", value: "PUT" },
            { text: "DELETE", value: "DELETE" }
          ],
          filterMultiple: true,
          onFilter: (value, record) => record.request.method.includes(value)
        },
        {
          title: "请求URL",
          dataIndex: "request.uri",
          customRender(text) {
            return text.split("?")[0];
          }
        },
        {
          title: "响应状态",
          dataIndex: "response.status",
          scopedSlots: { customRender: "responseStatus" }
        },
        {
          title: "请求耗时",
          dataIndex: "timeTaken",
          scopedSlots: { customRender: "timeTaken" }
        }
      ];
    }
  },
  mounted() {
    this.fetch();
  },
  methods: {
    handleClickUpdate() {
      this.fetch();
    },

    handleTableChange() {
      this.fetch();
    },

    fetch() {
      this.tableLoading = true;
      getAction("actuator/httptrace")
        .then(data => {
          let filterData = [];
          for (let d of data.traces) {
            if (
              d.request.method !== "OPTIONS" &&
              d.request.uri.indexOf("httptrace") === -1
            ) {
              filterData.push(d);
            }
          }
          this.dataSource = filterData;
        })
        .catch(e => {
          console.error(e);
          this.$message.error("获取HTTP信息失败");
        })
        .finally(() => {
          this.loading = false;
          this.tableLoading = false;
        });
    }
  }
};
</script>
<style></style>
